{% extends "base.html" %}

{% block subtitle %}
  Contribute
{% endblock subtitle %}

{% block content %}

  <div class="container" ng-controller="ContributeGallery">
    <div class="oppia-main-content">

      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8">
          <span class="pull-right">
            <a class="btn btn-success btn-lg" ng-click="showCreateExplorationModal(categoryList)">
              Create New Exploration
            </a>
            {% if allow_yaml_file_upload %}
              <a class="btn btn-default btn-lg" ng-click="showUploadExplorationModal(categoryList)">
                Upload Existing Exploration
              </a>
            {% endif %}
          </span>

          <h3 class="oppia-page-title">
            Contribute
          </h3>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-8">
          <div ng-if="categories">
            <div class="row">
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="nav nav-tabs oppia-gallery-nav-tabs oppia-light-border-right">
                  <div class="oppia-gallery-menu">
                    <ul class="nav nav-pills nav-stacked" id="navTabs">
                      <li ng-repeat="(category, explorations) in categories"
                          ng-class="{active: $index == 0}">
                        <a data-toggle="tab" href="#<[category|spacesToUnderscores]>">
                          <[category]>
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="col-lg-9 col-md-9 col-sm-9">
                <div class="tab-content oppia-gallery-tiles-container">
                  <div ng-repeat="(category, explorations) in categories" class="tab-pane" ng-class="{active: $index == 0}" id="<[category|spacesToUnderscores]>">
                    <div class="row">
                      <div ng-repeat="exploration in explorations" class="oppia-gallery-tile">

                        <div class="oppia-gallery-tile-top">
                          <a href="/explore/<[exploration.id]>" class="oppia-gallery-tile-anchor">
                            <div class="oppia-gallery-tile-description">
                              <span class="oppia-gallery-tile-title"><[exploration.title]></span>
                              <span class="oppia-gallery-tile-play">
                                <span class="glyphicon glyphicon-play-circle"></span>
                              </span>
                            </div>
                          </a>
                        </div>

                        <div class="oppia-gallery-tile-bottom">
                          <div>
                            <a ng-href="/create/<[exploration.id]>">
                              <span ng-if="exploration.can_edit">
                                <span class="glyphicon glyphicon-pencil" title="Edit this exploration"></span>
                                <span class="oppia-small-font">Edit</span>
                              </span>
                              <span ng-if="!exploration.can_edit">
                                <span class="oppia-small-font">View</span>
                              </span>
                            </a>

                            <span class="pull-right">
                              <span ng-if="exploration.is_cloned" class="label label-info">
                                Cloned
                              </span>
                              <span ng-if="exploration.is_community_owned" class="label label-info">
                                Community-owned
                              </span>
                              <span ng-if="exploration.is_public" class="label label-info" style="opacity: 0.5">
                                Beta
                              </span>
                              <span ng-if="exploration.is_private && !exploration.is_cloned" class="label label-info">
                                Private
                              </span>
                            </span>
                          </div>
                        </div>

                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </div>

          <script type="text/ng-template" id="modals/galleryCreateNew">
            <div class="modal-header">
              <h3>
                <span ng-if="isUploadModal">Upload Exploration</span>
                <span ng-if="!isUploadModal">Add New Exploration</span>
              </h3>
            </div>

            <div class="modal-body">
              <div ng-if="isUploadModal">
                <em>
                  This form allows you to upload the YAML file corresponding to an exploration. Currently, you will need to upload any associated image files separately in the relevant states.
                </em>
              </div>

              <br>

              <form role="form" class="form-horizontal">
                <fieldset>
                  <div class="form-group" ng-class="{'has-error': !newExplorationTitle}">
                    <label for="newExplorationTitle" class="col-lg-2 col-md-2 col-sm-2">
                      Title
                    </label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                      <input id="newExplorationTitle" type="text" class="form-control" ng-model="newExplorationTitle" name="newExplorationTitle" autofocus required>
                    </div>
                  </div>

                  <div class="form-group" ng-class="{'has-error': !newExplorationCategory}">
                    <label for="newExplorationCategory" class="col-lg-2 col-md-2 col-sm-2">
                      Category
                    </label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                      <select2-dropdown item="newExplorationCategory" choices="categoriesForDropdown" placeholder="Select a category, or enter a new one" new-choice-regex="^[A-Z a-z]+$" width="300px">
                      </select2-dropdown>
                    </div>
                  </div>

                  <div ng-if="isUploadModal" class="form-group">
                    <label for="newFileInput" class="col-lg-2 col-md-2 col-sm-2">
                      Upload YAML file
                    </label>
                    <div class="col-lg-10 col-md-10 col-sm-10">
                      <input id="newFileInput" type="file">
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
            <div class="modal-footer">
              <button class="btn btn-success" type="submit" ng-click="save(newExplorationTitle, newExplorationCategory)" ng-disabled="!newExplorationTitle || !newExplorationCategory">Save</button>
              <button class="btn btn-default" ng-click="cancel()">Cancel</button>
            </div>
          </script>
        </div>
      </div>

      {% if announcement %}
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="oppia-contribute-gallery-announcement">
            {{ announcement }}
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('galleries/ContributeGallery.js') }}
  </script>
  {{ widget_js_directives }}
{% endblock footer_js %}
